<template>
  <div class="container">
    <el-page-header @back="goBack" content="消息列表"></el-page-header>
    <el-row type="flex" justify="space-around" class="nav-bar" style="min-width: 1300px;">
      <el-col class="text-right">
        <el-form :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item label="状态" prop="region">
            <el-select v-model="newsTypeId" placeholder="已读">
              <el-option v-for="(item, index) in newsTypeList" :key="item.id" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="类型" prop="region">
            <el-select v-model="remid" >
              <el-option v-for="(item, index) in remindtypeList" :key="item.id" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="region">
            <el-select v-model="dateid" >
              <el-option v-for="(item, index) in dateList" :key="item.id" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="region">
            <el-input v-model="namekey" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table class="e-m-t-45" :data="tableData" style="width: 100%" stripe>
      <el-table-column fixed type="index" width="50">
      </el-table-column>
      <el-table-column prop="remindtype" label="消息类型" width="150">
      </el-table-column>
      <el-table-column prop="remarks" label="消息内容">
        <template slot-scope="scope">
          <span class="link-color" @click="link(scope.row.relationid, scope.row.remindtype, scope.row.id)">
            <span v-if="scope.row.isread">[已读]</span>
            <span v-else>[未读]</span>
            <span>{{ scope.row.remarks }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createddatetime" label="消息时间" width="150">
      </el-table-column>
      <el-table-column prop="isread" label="是否已读" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.isread ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button @click="setRead(scope.row.id)" type="text" size="small" v-if="!scope.row.isread">设为已读</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  head() {
    return {
      title: '消息列表' 
    }
  },
  data() {
    return {
     
      newsTypeId: 0,
      newsTypeList: [
        {
          id: 0,
          name: '全部'
        },
        {
          id: 1,
          name: '是'
        },
        {
          id: 2,
          name: '否'
        },
      ],
      remid:0,
      remindtypeList:[
      {
          name:'全部',
          id:0
        },
        {
          name:'用户下单',
          id:3
        },
        {
          name:"小哥拒单",
          id:4,
        },
        {
          name:"订单超时",
          id:7
        },
        {
          name:'小哥提现申请',
          id:8
        },
        {
          name:'散客提现申请',
          id:9
        },
        {
          name:'客户组提现申请',
          id:10
        },
        {
          name:'待核帐出库单',
          id:11
        }
      ],
      dateid:0,
      dateList:[
      {
          name:'全部',
          id:0
        },
        {
          name:'今日',
          id:1
        },
        {
          name:"昨日",
          id:2,
        },
        {
          name:"本月",
          id:3
        },
        {
          name:'上月',
          id:4
        },
        {
          name:'本季度',
          id:5
        },
        {
          name:'上季度',
          id:6
        },
        {
          name:'本年',
          id:7
        },
        {
          name:'上年',
          id:8
        }
      ],
      usertype: 0,
      loading: true,
      namekey: '',
      phonekey: '',
      page: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      options: [{
        value: 0,
        label: '全部'
      },
      {
        value: 1,
        label: '散客'
      }, {
        value: 2,
        label: '客户组'
      }, {
        value: 3,
        label: '小哥'
      }],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    link(relationid, type, id) {
      if (type == '用户下单' || type == '小哥拒单' || type == '订单超时' ) {
        this.$router.push({
          path: '/order/user/Views?id=' + relationid
        })
      }
      else if (type == '出库派单'){
        this.$router.push({
          path: '/order/store/Views?id=' + relationid
        })
      }
      else if (type == '小哥提现申请' || type == '散客提现申请' || type == '客户组提现申请'){
        this.$router.push({
          path: '/withdrawal/list'
        })
      }
      else if(type == '待核账出库单'){
        this.$router.push({
          path: '/finance/Views?id=' + relationid
        })
      }
      this.setRead(id).then(()=>{
        this.$store.dispatch('signalrConnection')
      })
    },
    getList() {
      this.tableData = []
      this.loading = true

      this.$axios.post('/Remind/List', {
        "PageIndex": this.page,
        "PageSize": this.pageSize,
        "Key": this.namekey,
        "Type": this.newsTypeId,
        "RemindType":this.remid,
        "TimeType":this.dateid
      }).then((res) => {
        this.loading = false
        this.tableData = res.rows;
        this.total = res.total;
      }).catch((err) => {
        this.loading = false
      })
    },
    setRead(id) {
      return this.$axios.get('/Remind/SetRead?id=' + id).then((res) => {
        this.getList()
      })
    },
    pageChange(e) { // 页码切换事件
      this.page = e;
      this.getList()
    },
    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.link-color {
  color: var(--blue);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}
</style>
